$(function () {
  initArtCateList()
  //获取图书列表并渲染页面
  function initArtCateList() {
    axios({
      url: '/my/article/cates',
    }).then(res => {
      // console.log(res.data)
      let arr = []
      res.data.data.forEach(val => {
        arr.push(`
        <tr>                    
        <td>${val.Id}</td>
        <td>${val.name}</td>
        <td>${val.alias}</td>
        <td>
          <button data-id="${val.Id}" type="button" class="btn-edit layui-btn layui-btn layui-btn-xs" >修改</button>
          <button data-id="${val.Id}" type="button" class="btn-del layui-btn layui-btn layui-btn-xs layui-btn-danger" >删除</button>
        </td>
      </tr>
        `)
      })
      $('tbody').empty().html(arr.join(''))
    })
  }

  let indexadd = 0 //添加文章 弹出框的 索引（用于后面关闭）
  $('#addBtn').on('click', function () {
    indexadd = layui.layer.open({
      type: 1,
      title: '添加文章类别',
      area: ['500px', '250px'],
      content: `
      <form class="layui-form" id="form-add">
      <!-- 分类的名字 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required="" lay-verify="required|name" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 分类的别名 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input type="text" name="alias" required="" lay-verify="required|alias" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formDemo">确认添加</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
      `,
    })
  })
  //添加文章的表单提交时事件
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    axios({
      method: 'post',
      url: '/my/article/addcates',
      data: $(this).serialize()
    }).then(res => {
      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }
      layui.layer.msg(res.data.message)
      initArtCateList()
      layui.layer.close(indexadd)
    })
  })

  let indexedit = 0 //修改文章 的索引
  $('tbody').on('click','.btn-edit',function(){
    indexedit = layui.layer.open({
      type: 1,
      title: '修改文章类别',
      area: ['500px', '250px'],
      content: `
      <form class="layui-form" id="form-edit" lay-filter="form-edit">
        <input type="hidden" name="Id" >
        <!-- 分类的名字 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required="" lay-verify="required|name" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <!-- 分类的别名 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required="" lay-verify="required|alias" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <!-- 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      `,
    })

    let id = $(this).attr('data-id')
    axios({
      url:'/my/article/cates/'+id,
    }).then(res=>{
      if(res.data.status !==0){
        return layui.layer.msg(res.data.message)
      }
      // console.log(res.data.data)
      layui.form.val("form-edit",res.data.data)
    })
  })
  //修改文章时的表单提交事件
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault()
    axios({
      method: 'post',
      url: '/my/article/updatecate',
      data: $(this).serialize()
    }).then(res => {
      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }
      layui.layer.msg(res.data.message)
      initArtCateList()
      layui.layer.close(indexedit)
    })
  })
  //删除按钮的点击事件
  $('tbody').on('click','.btn-del',function(){
    let id = $(this).attr('data-id')
    // console.log(id)
    layer.confirm('是否删除该文章?', {icon: 3, title:'提示'}, function(index){
      axios({
        method:'GET',
        url:'/my/article/deletecate/'+id,
      }).then(res=>{
        if(res.data.status !==0){
          return layui.layer.msg(res.data.message)
        }
        layui.layer.msg(res.data.message)
        initArtCateList()
      })
      layer.close(index)
    })
  })
})